<template>
	<view>
		<navBar>
			<template slot="title">
				<view>易征集</view>
			</template>
		</navBar>
		<view class="cintainer">
			<view class="content">
				<view class="title">
					变废为宝·邀你"易"起<br />
					作品信息登记
				</view>
				<view class="form">
					<u-form :model="form" ref="uForm" labelWidth="250" label-position='top'>
						<u-form-item label="姓名" right-icon='account' prop="name" border-bottom>
							<u-input v-model="form.name" style="caret-color: #1D8815;" />
						</u-form-item>
						<u-form-item label="学号" prop="number" border-bottom>
							<u-input v-model="form.number" style="caret-color: #1D8815;" />
						</u-form-item>
						<u-form-item label="手机号" prop="phone" border-bottom>
							<u-input v-model="form.phone" />
						</u-form-item><u-form-item label="作品说明 (不少于200字)" prop="description" border-bottom='true'>
							<u-input type='textarea' v-model="form.description" style="caret-color: #1D8815;" />
						</u-form-item>
						</u-form-item>
						<u-form-item label="上传作品照片 (正、侧、俯视图)" prop="upload" border-bottom='true'>
							<u-upload :action="action" :file-list="fileList" @on-uploaded="onUploaded" ref="uUpload"
								max-count="6"></u-upload>
						</u-form-item>
						<u-form-item label="参加易互动" prop="join" border-bottom='true' label-position='left'
							labelWidth="200">
							<u-switch v-model="form.interact"></u-switch>
						</u-form-item>
						<u-form-item label="标签" prop="tag" border-bottom='true' label-position='top' labelWidth="200"
							v-if="this.form.interact">
							<view class="" style="width: 100%;">
								<u-input v-model="form.tag" type="select" placeholder='变废为宝'
									@click="show = true"></u-input>
								<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"
									@close='actionSheetClose'></u-action-sheet>
								<u-tag :text="this.form.tag" mode="dark" v-if="this.form.tag" shape="circle"
									type='info' />
							</view>

						</u-form-item>
						<u-form-item label="参加易市集" prop="join" border-bottom='true' label-position='left'
							labelWidth="200">
							<u-switch v-model="form.checked"></u-switch>
						</u-form-item>
						<u-form-item label="价格" prop="price" border-bottom='true' label-position='top' labelWidth="200"
							v-if="this.form.checked">
							<u-input v-model="form.price"></u-input>
						</u-form-item>

					</u-form>
					<u-button @click="submit" type="primary" class="colorFont" :ripple="true"
						ripple-bg-color="#909399">发 布</u-button>
					<view class="inset">
						<image src="../../static/image/1.jpeg" mode="aspectFill" style="width: 100%; height: 100%;">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import comm from "@/comm/comm.js"
	import navBar from "@/components/navBar.vue"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				errorType: ['message'],
				show: false,
				actionSheetList: [{
						text: '变废为宝'
					},
					{
						text: '环保'
					},
					{
						text: '手工'
					},
					{
						text: '双碳'
					}
				],
				// 表单数据
				form: {
					name: '',
					number: '',
					phone: '',
					description: '',
					price: null,
					checked: false,
					interact: false,
					filesUrl: '',
					tag: ''
				},

				// 验证规则
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					number: [{
							required: true,
							message: '请输入学号',
							trigger: 'change,blur'
						},
						{
							pattern: /^[0-9]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字'
						},
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'change,blur'
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					description: [{
						min: 50,
						required: true,
						message: '作品说明 (不少于200字)',
						trigger: 'change,blur'
					}],
					tag: [{
						required: true,
						message: '请选择标签',
						trigger: 'change,blur'
					}],
					price: [{
						required: true,
						message: '请输入价格',
						trigger: 'change,blur'
					}],
					upload: [{
							validator: (rule, value, callback) => {
								if (this.imageQuantity < 2) {
									return false
								} else {
									return true
								}
							},
							message: '不能少于两张图片',
							trigger: 'change,blur'
						},
						{
							validator: (rule, value, callback) => {
								if (this.imageQuantity > 3) {
									return false
								} else {
									return true
								}
							},
							message: '不能大于两张图片',
							trigger: 'change,blur'
						},
					]
				},

				// 上传数据url
				action: `${comm.xieyi}${comm.baseUrl}/admin/upload`,

				// 图片列表
				fileList: [],
				imageQuantity: 0 // 图片长度
			}
		},
		methods: {
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.form.tag = this.actionSheetList[index].text;
			},
			actionSheetClose() {
				this.form.tag = '变废为宝'
			},
			/**
			 * 提交作品
			 */
			submit() {
				console.log(this.form);
				// 验证
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						console.log(this.form);
						let isMarkrt = this.form.checked == 'false' ? 0 : 1
						var url = '/works';
						var method = 'POST';
						var data = {
							"illustrate": this.form.description,
							"imgUrl": this.form.filesUrl,
							"name": this.form.name,
							"phone": this.form.phone,
							"price": this.form.price,
							"studentId": this.form.number,
							'isMarket': isMarkrt
						};

						console.log(data);
						// 请求的数据， 如果没有数据可传空对象 {}
						comm.request(url, method, data).then((res) => {
							console.log(res);
							if (res.code = 1) {
								this.reset()
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}
						})

						// 易互动
						var url = '/posts/release';
						var method = 'POST';
						var data = {
							"description": this.form.description,
							"imgUrl": this.form.filesUrl,
							"labelName": this.form.tag,
							"ybUserid": '64503722'
						}
						comm.request(url, method, data).then((res) => {
							console.log('易互动：' + res);
							if (res.code = 1) {
								this.reset()
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}
						})

					} else {
						console.log('验证失败');
					}
				});

			},

			/**
			 * 上传文件
			 * @param {Object} lists 文件列表（包含上传失败）
			 */
			onUploaded(lists) {
				let files = [];
				// 检验长传成功的图片
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				let filesUrl = []
				files.forEach((item) => {
					filesUrl.push(item.response.data)
				})
				this.imageQuantity = filesUrl.length
				this.form.filesUrl = filesUrl.join(',')
				console.log(this.form.filesUrl);
			}

			,
			/**
			 * 重置表单
			 */
			reset() {
				this.form = {
						name: '',
						number: '',
						phone: '',
						description: '',
						price: null,
						checked: false,
						filesUrl: ''
					},
					this.fileList = [],
					this.imageQuantity = 0 // 图片长度
				this.$refs.uUpload.clear()
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.u-form-item {
		// margin-bottom: 20rpx;
	}

	.u-input {
		// margin-top: 20rpx;
	}


	* {
		box-sizing: border-box;
	}

	.colorFont {
		color: #25840C;
		width: 300rpx;
		font-size: 44rpx;
		font-weight: bold;
		background: #D8FAD2;
		border: none;
		border-radius: 10px;
		margin-top: 30rpx;
	}

	.cintainer {
		width: 100vw;
		height: 100%;
		background: #DFFBB3;
		padding: 10px;

		.content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #EFFAEC;
			border-radius: 20rpx;

			.title {
				height: 180rpx;
				width: 100%;
				border-radius: 20rpx 20rpx 0 0;
				padding: 30rpx;
				background: #fff;
				color: #1D8815;
				font-weight: bold;
				font-size: 48rpx;
				text-align: center;
			}

			.form {
				position: relative;
				flex: 1;
				background: #fff;
				width: 100%;
				margin-top: 30rpx;
				border-radius: 0 0 20rpx 20rpx;
				padding: 20rpx;

				.inset {
					position: absolute;
					bottom: 1%;
					right: 1%;
					width: 180rpx;
					height: 180rpx;
					z-index: 2;

					image {
						border-radius: 20rpx;
					}
				}

			}
		}
	}
</style>